
<style lang="scss" scoped>
    .mobile{
        position: relative;
    }
    img{
        width:100%;
        // height: 100vh;
    }
    .top{
        position: relative;
        .step{
            position:absolute;
            bottom:120px;
            width:78%;
            margin: auto;
            left: 0;right: 0;
        }
        .share_btn{
            position:absolute;
            bottom: 50px;
            left: 0;right: 0;
            border:0;
            background: url(../../assets/btn_bg.svg) no-repeat ;
            background-size: 100% 100%;
            color: #4175FF;
            width:100%;
            color: #fff;
            margin: auto;
            display: block;
            line-height: 40px;
            outline: none;
        }
        .logout{
            position:absolute;
            height: 30px;;
            right: 5px;
            top:5px;
            border-radius: 3px;
            border:1px solid rgba(220,220,220,.5);
            color: #fff;
            margin: auto;
            display: block;
            outline: none;
            background: transparent;
        }
    }
    .login_after{
        padding: 0 10px;
        position: relative;
        .to_rule{
            text-decoration: underline;
            color: #999;
            position:absolute;
            right: 10px;
            top: 100px;
        }
        .my{
            text-align: center;
            .face{
                width:80px;
                border-radius: 50%;
                margin-top: 30px;
            }
            .nicename{
                font-size: 16px;
                color: #333;
                margin-top: 20px;
            }
            .unique_code{
                line-height: 30px;
                font-size: 18px;
                color: #666;
                letter-spacing: 2px;
            }
            &>p{
                color: #999;
                
            }
            .box {
                display: flex;
                justify-content: space-between;
                line-height: 130px;
                height: 130px;
                margin: 20px auto;
                .item{
                    width:30%;
                    background: #F2F2F2;
                    color: #666;
                    position: relative;
                    &::before{
                        position:absolute;
                        left: 0;
                        top:0;
                        content: attr(t-be);
                        width:45%;
                        height: 26px;
                        line-height: 26px;
                        background: #4175FF;
                        color: #fff;
                    }
                    &::after{
                        position: absolute;
                        left: 0;
                        content: attr(t-af);
                        bottom: 30px;
                        color: #999;
                        line-height: 0;
                        text-align: center;
                        margin: auto;
                        right: 0;
                    }
                    &:first-child::after{
                        text-decoration: underline;
                    }
                    span{
                        margin-right: 4px;
                        font-size: 26px;
                    }
                }

            }
            .stage{
                text-align: left;
                margin-bottom: 20px;
                border-bottom: 1px solid #ddd;
                h3{
                    font-size: 16px;
                    color: #333;
                    font-weight: bold;
                    line-height: 30px;
                }
                p{
                    line-height: 26px;
                    color: #666;
                }
            }
        }
       .rank{
            h3{
                margin: 0;
                font-size: 14px;
                color: #333;
                line-height: 28px;
                span{
                    color: #999;
                }
                a{
                    float: right; 
                    color: #999;
                    text-decoration: underline;
                }
            }
            p.date{
                color: #999;
                font-size: 12px;
            }
       }
       .rank ul{
            margin: 0 ;
            padding: 20px 0 0;
            list-style: none;
            li{
                display: flex;
                justify-content: space-around;
                .num{
                    color: #818181;
                    font-size: 18px;
                    text-align: center;
                    width:60px;
                    line-height: 50px;
                    img{
                        width:28px;
                    }
                }
                .face{
                    width:50px;
                    height: 50px;
                    display: block;
                }
                .txt{
                    width:200px;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    font-size: 16px;
                    p{
                        font-size: 12px;
                        line-height: 26px;
                        color: #999;
                    }
                }
                .noun{
                    margin-top: -30px;
                }
            }
        }
    }
    .noun{
        width:18px;
        margin-top:-3px
    }
    .dialog{
        position:fixed;
        top: 0;
        width:100%;
        height: 100vh;
        left: 0;
        z-index: 20;
        background: rgba(0,0,0,.8);
        color: #fff;
        img{
            width:200px;
            position:absolute;
            right: 0;
        }
        .txt{
            text-align: center;
            width:160px;
            position:absolute;
            line-height: 26px;
            top: 160px;
            left: 0;right: 0;
            font-size: 18px;
            margin: auto;
            color: #fff;
            button{
                display: block;
                margin: 30px auto;
                background: transparent;
                border:2px solid #fff;
                border-radius: 3px;
                width:70%;
                line-height: 35px;
            }
        }
    }

</style>
<style>
    .mobile .login_after .my .stage p span{
        color: #4175FF;
    }
</style>

<template>
    <div class="mobile">
        <div class="top">
            <img src="@/assets/activity_m_bg.jpg" >
            <button class="logout" v-if="step" @click="logout"> 注销 </button>
            <img class="step" :src="require('@/assets/step'+step+'.svg')" >
            <button class="share_btn" @click="share_func">立即分享</button>
        </div>
        <div class="login_after" v-if="fm.name">
            <router-link to="rule" class="to_rule">活动细则</router-link>
            <div class="my">
                <img src="@/assets/face2.png" class="face">
                <h5 class="nicename">{{fm.name}}</h5>
                <h6 class="unique_code">{{fm.unique_code}}</h6>
                <p>邀请码</p>
                <div class="box">
                    <router-link to="history_invite" class="item" t-be="邀请" t-af="当期有效邀请">
                        <span>{{fm.invited_num}}</span>人
                    </router-link>
                    <div class="item" t-be="奖励" t-af="99元申请次数">
                        <span>{{fm.left_coupons_times}}</span>次
                    </div>
                    <div class="item" t-be="排名" t-af="当前名次">
                        <span>{{fm.rank_no}}</span>
                        <img class="noun" :src="rank_trend">
                    </div>
                </div>
                <div class="stage">
                    <h3>阶段奖励</h3>
                    <p v-html="prize_txt"></p>
                    <p v-if="fm.need_num">{{"还差"+fm.need_num+"次有效邀请可进入排行榜前10"}}</p>
                </div>
            </div>
            <div class="rank">
                <h3>排行榜<span>（第{{rank_info.round}}期）</span>
                    <router-link :to="{name:'m_rule',query:{ rank:1 }}">规则</router-link>
                </h3>
                <p class="date">{{rank_info.start_time+'~'+rank_info.end_time}}</p>
                <ul>
                    <li v-for="(val,index) in rank_list" :key="index">
                        <div class="num">
                            <img v-if="index<3" :src="require('@/assets/n'+(index+1)+'.svg')">
                            <p v-else>{{index+1}}</p>
                        </div>
                        <img class="face" src="@/assets/face1.png">
                        <h4 class="txt">
                            {{val.client_name}}
                            <p>成功邀请{{val.invite_num}}次</p>
                        </h4>
                        <img class="noun" :src="val.trend">
                    </li>
                </ul>
            </div>
        </div>
        <div class="dialog" v-show="guide_share_modal" @click="guide_share_modal=false">
            <img src="@/assets/guide_share.svg" alt="">
            <div class="txt">
                首次分享至朋友圈即可获得一次机会
                <button>知道了</button>
            </div>
        </div>
    </div>
</template>
<script>
import img_up from '@/assets/ranking_up.svg'
import img_down from '@/assets/ranking_down.svg'
import { userinfo,activity_rank,jssdk,inc_share_coupons  } from "@/assets/api"
import wx from "weixin-js-sdk"
export default {
    data(){
        return {
            step:0,
            guide_share_modal:false,
            img_up,
            img_down,
            rank_info:{},
            rank_trend:require('@/assets/ranking_center.svg'),
            fm:{
                name:'',
                left_extra_num:0, //还差多少次可以获得额外申请机会
                invited_num:0, //邀请了多少个
                need_num:0, //剩余多少可进榜单
                left_coupons_times:0,  //剩余可用优惠次数
                rank_no:0,   //我的排名,
                unique_code:'',
            },
            rank_list:[],
            prize_txt:'',
        }
    },
    methods:{
        logout(){
            localStorage.clear();
            window.history.go(0)
        },
        share_func(){
            this.fm.name?this.guide_share_modal=true:this.$router.push('login')
        }
    },
    mounted(){
        jssdk({list:'onMenuShareTimeline,onMenuShareAppMessage',url:window.location.href})
        .then(res=>{
            if(res){
                let config={}
                config.debug=false
                config.appId=res.data.config.appId
                config.nonceStr=res.data.config.nonceStr
                config.signature=res.data.config.signature
                config.timestamp=res.data.config.timestamp
                config.jsApiList=['onMenuShareTimeline','onMenuShareAppMessage']
                wx.config(config)
                wx.error(()=>{
                    alert('微信参数异常')
                    new Error('微信参数异常')
                    // this.$toast.fail('微信参数异常');
                });  
                const params={
                    title: '您已获得99元申请外观专利的机会，请注意查收。', 
                    link: this.host+'/m/home?invite_code='+localStorage.getItem('unique_code'), 
                    imgUrl: 'http://common.pizhigu.com/wx_share_img.jpg', 
                    desc:'派智知产管家1折申请季！还能获得3个月特价申请资格，可以累计，上不封顶哦！',                        
                    success: ()=>{
                        if(this.step){
                            inc_share_coupons()
                        }
                    }
                }
                wx.onMenuShareTimeline(params)
                wx.onMenuShareAppMessage(params)

            }
        })
        if(localStorage.getItem('name') ){
            userinfo(localStorage.getItem('client_id'),localStorage.getItem('unique_code'))
            .then(res=>{
                if(res){

                    this.step=1
                    for (const key in this.fm) {
                        this.fm[key]=res.data[key] || 0
                    }
                    let txt="立即分享即可得到一次申请机会"
                    if(res.data.rank_trend!='-')
                       this.rank_trend=require('@/assets/ranking_'+(res.data.rank_trend?'up':'down')+'.svg')
                    else
                        this.rank_trend=require('@/assets/ranking_center.svg')
                    
                    if(res.data.has_shared){
                        txt='现在邀请，双方各得一次申请机会'
                        this.step=2
                        if(res.data.invited_num==1){
                            txt=`还差<span>${res.data.left_extra.time}</span>次有效邀请即可获得<span>${res.data.left_extra.plus}</span>次申请机会`
                            this.step=3
                        }
                        else if(res.data.invited_num==2){
                            txt=`还差<span>${res.data.left_extra.time}</span>次有效邀请即可获得<span>${res.data.left_extra.plus}</span>次申请机会`
                            this.step=4
                        }
                        else if(res.data.invited_num>2){
                            txt='您已获得所有奖励，查看你的排名吧'
                            this.step=5
                        } 
                    }
                    this.prize_txt=txt

                    for (const key in this.fm) 
                        this.fm[key]=res.data[key] || 0
                    
                    // this.fm.time=res.data.left_extra.time
                    // this.fm.plus=res.data.left_extra.plus
                    localStorage.setItem('name',res.data.name)
                }
            })

            activity_rank({activity_id:1}).then(res=>{
                if(res){
                    this.rank_list=res.data.list.map(el=>{
                        if(el.trend==='-'){
                            el.trend=require('@/assets/ranking_center.svg')
                        }else{
                            el.trend=require('@/assets/ranking_'+(el.trend?'up':'down')+'.svg')
                        }
                        return el
                    })
                    this.rank_info={
                        start_time:res.data.start_time.substr(0,10),
                        end_time:res.data.end_time.substr(0,10),
                        round:res.data.round,
                    }
                    
                }
            })
            
     
            

        }


    }
}
</script>



